<template>
  <div>
    <div class="custable">
      <div class="second-title" v-html="secondTitle"></div>
      <div class="tab" v-if="!line">
        <div v-for="(item, index) in tabList" :key="item.id" @click="changeActive(index)"
          :class="{ 'tab-item': true, active: isActive === index }">{{ item.name }}
        </div>
      </div>
      <!--  tableBox 圆角, thHeight 表头高度, shaw 第一行加粗  -->
      <div :class="{ tableBox: true, thHeight: flagIndex !== 0, shaw: firstTabId !== 3 }">
        <div v-if="table">
          <div>
            <!--本年通行流量完成情况汇总-->
            <div ref="qingfenContent">
              <table :class="{ province: true }">
                <tr style="border:1px solid #efefef;border-radius: 6px 6px 0px 0px">
                  <td class="data-item" v-for="(item, index) in tableData" :key="index">
                    <div class="data">
                      <span class="font">{{ `${item.data.split(".")[0]}` }}</span><span class="small">.{{
                          item.data.split(".")[1]
                      }}</span>
                    </div>
                    <div class="item">
                      <!--              <img :src="item.img" alt="">-->
                      <div class="item-title">{{ item.name }}</div>
                      <div class="item-second-title">
                        <span>(同比</span>
                        <img :src="uparrow" alt="" v-if="parseFloat(item.pern) >= 0" />
                        <img :src="downarrow" alt="" v-if="parseFloat(item.pern) < 0" />
                        <span class="num">{{ item.pern }}</span>
                        <span>)</span>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr style="border:1px solid #efefef;border-radius: 0px 0px 6px 6px;border-top:0px">
                  <td class="data-item" v-for="(item, index) in tableData" :key="index">
                    <div class="data">
                      <span class="font" style="color: #4D61EC">{{
                          `${item.yes.split(".")[0]}`
                      }}</span><span class="small" style="color: #4D61EC">.{{ item.yes.split(".")[1]
}}</span>
                    </div>
                    <div class="item">
                      <!--              <img :src="item.img" alt="">-->
                      <div class="item-title">{{ item.yesname }}</div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <!--本年通行流量完成情况汇总 end-->
            <!-- <gray-block></gray-block> -->
          </div>
        </div>
        <!-- 折线图-->
        <detail-aweek v-else-if="line" ref="detailAweek" title="" :listInfo="tableData"></detail-aweek>

        <!--   stripe斑马线 border 表格边框   -->
        <el-table v-if="!line && !table" :span-method="objectSpanMethod" stripe border :data="tableData"
          :max-height="tableHeight" :style="{ width: '100%' }" :header-cell-style="setStyle" :cell-style="cellStyle">
          <el-table-column v-for="(item, index) in tableHeader" :prop="item.key" :label="item.value" :key="index"
            :width="getWidth(item.key, item.value)" :fixed="item.key === 'dhm' || item.key === 'name' || item.key === 'number'">
            <!--    合并表头      -->
            <template v-if="item.children">
              <el-table-column  v-for="(child, i) in item.children" :prop="child.key" :label="child.value" :key="i"
                :width="getChildWidth(child.key, child.value)">
                <!--      自定义合并表头col        -->
                <template slot-scope="scope">
                  <span :style="{ color: showFormat(scope) }">
                    {{ scope.column.label === '同比'
                        || scope.column.label === '占比'
                        ? percentage(scope.row[scope.column.property])
                        : scope.row[scope.column.property]
                    }}
                  </span>
                </template>
              </el-table-column>
            </template>
            <template slot-scope="scope">
              <div>
                <div :style="{ color: showFormat(scope) }">
                  <div v-if="scope.column.label === '名称' || scope.column.label === '门架名称'">
                    <!-- <template v-if="scope.row.name !== '全省-合计'"> -->
                    <template
                      v-if="scope.row.name.replace('分中心-', '') !== '合计' && scope.row.name.replace('全省-', '') !== '合计'">
                      <div v-if="scope.column.label === '名称'" @click="
                        intent(scope)
                      " :style="{ color: '#4375C9', textDecoration: 'underline' }">
                        {{ scope.row.name.replace('高速', '') }}
                      </div>
                      <div v-else>{{ scope.row.name }}</div>
                    </template>

                    <template v-else>
                      <div>
                        {{ scope.row.name.toString().replace('全省-', '') }}
                      </div>
                    </template>
                  </div>
                  <div v-if="scope.column.label === '排序'">
                    {{ scope.row.rank || scope.$index }}
                  </div>
                  <div v-if="scope.column.label === '时间'">
                    {{ scope.row.dhm }}
                  </div>
                  <div v-if="!['时间', '排序', '名称', '门架名称'].includes(scope.column.label)">
                    {{ scope.column.label ===
                        '同比' ? percentage(scope.row[scope.column.property]) : scope.row[scope.column.property]
                    }}
                  </div>
                </div>
              </div>
              <!-- <a :class="{ link: scope.column.label === '名称' && scope.row.name.replace('全省-','') !== '合计' }"
              :style="{ color: showFormat(scope) }" @click="intent(scope)">
              {{ scope.column.label === '同比'
                  || scope.column.label === '货6同比'
                  ? percentage(scope.row[scope.column.property])
                  : scope.row[scope.column.property].toString().replace('高速','').replace('全省-','')
              }}
            </a> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <gray-block v-if="line"></gray-block>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import DetailAweek from "../detailAweek";

import uparrow from "@/assets/feeManage/uparrow.png";
import downarrow from "@/assets/feeManage/dowmarrow.png";
import grayBlock from '@/components/grayBlock'
export default {
  name: 'CusTable',
  components: {
    DetailAweek, grayBlock,
  },
  props: {
    secondTitle: {
      type: String,
      default: ''
    },
    tabList: {
      type: Array,
      default: () => []
    },
    tableHeader: {
      type: Array,
      default: () => []
    },
    flagIndex: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: Number,
      default: () => 90
    },
    line: false,
    table: false,
    index: 0,
  },
  data() {
    return {
      uparrow,
      downarrow,
      isActive: 0
    }
  },
  mounted() {
  },
  computed: {
    ...mapGetters(['firstTabId', 'tabIndex'])
  },
  methods: {
    initLine() {
      this.$refs.detailAweek && this.$refs.detailAweek.initLine();
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.firstTabId == 2) {
        return { "text-align": "center", 'line-height': '0.28rem', 'padding': '0.18rem 0', 'font-weight': '400' };
      }
      if (columnIndex > 0 && ((this.firstTabId == 3) ? rowIndex === 0 : (rowIndex === 0 || rowIndex === 1))) {
        return { "text-align": "center", 'line-height': '0.28rem', 'padding': '0.18rem 0', 'font-weight': 'bold' };
      }
      return { "text-align": "center", 'line-height': '0.28rem', 'padding': '0.18rem 0', 'font-weight': '400' };
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.firstTabId === 3) return {
        rowspan: 1,
        colspan: 1
      };
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    getChildWidth(key, value) {
      // // console.log(key, value)
      // if (this.firstTabId === 3) {
      //   return '55px'
      // } else {
      //   return '65px'
      // }
      if (value === '去年' || value === '今年') {
        return '75px'
      }
      if (value !== '同比' && value !== '占比') {
        return '70px'
      } else {
        return '55px'
      }
    },
    // 判断如果不为数字 不添加百分号
    percentage(value) {
      if (isNaN(value)) {
        return value
      }
      return value + '%'
    },
    // 判断不同的点击状态表格的位置
    getPadding() {
      if (this.firstTabId === 0) {
        return '0.4rem 0 0.4rem 0.3rem;'
      } else if (this.firstTabId === 3) {
        return '0.26rem 0 0.4rem 0.3rem'
      } else {
        return '0 0 0.4rem 0.3rem'
      }
    },
    // 判断如果是分公司时可以点击跳转
    intent(scope) {
      //首页多了2个div,所以要减3
      let tableIndex = this.firstTabId == 0 ? this.index - 3 : this.index - 1;
      this.$router.push({
        path: this.firstTabId == 1 || this.firstTabId == 2 ? '/tollStationFlowNew/detail1' : '/tollStationFlowNew/detail',
        query: { pathIndex: this.firstTabId == 0 ? 0 : 1, index: this.firstTabId, tableIndex: tableIndex, tabIndex: this.isActive, subcno: scope.row.subcno, title: scope.row.name }
      })
    },
    // 判断同比正负颜色不同
    showFormat(scope) {
      if (scope.column.label === '同比') {
        if (parseFloat(scope.row[scope.column.property]) > 0) {
          return '#F92D2D'
        } else if (parseFloat(scope.row[scope.column.property]) < 0) {
          return '#0C9B50'
        }
      }
      return ''
    },
    // 切换出入口(出入省)状态
    changeActive(index) {
      this.$store.commit('SETTABINDEX', index + 1)
      this.$store.commit('SETTABLEINDEX', this.flagIndex)
      this.isActive = index
    },
    // 给表格添加圆角
    setStyle({ row, column, rowIndex, columnIndex }) {
      if (
        column.label === "流量" ||
        column.label == "同比" ||
        column.label == "占比" 
      ) {
        return {
          "text-align": "center",
          background: "#BEDCFC",
          color: "#3F3F3F",
          fontSize: "12px",
          'font-weight': 'normal !important'
        };
      }
      return { 'text-align': 'center', 'background': '#BEDCFC',fontSize: "14px", color: '#3D3D3D', fontWeight: 'normal !important' }
    },
    // 文字过长的改变宽度
    getWidth(key, value) {
      if (!key) {
        return false
      }
      if(key === 'number'){
        return '28px'
      }
      if(key === 'dhm'){
        return '44px'
      }
      if (this.firstTabId === 3 && key === 'name') {
        return '70px'
      } else if (this.firstTabId === 0 && key === 'name') {
        return '48px'
      } else if (this.firstTabId === 2 && key === 'name') {
        return '48px'
      } else if (this.firstTabId === 1 && key === 'name') {
        return '48px'
      } else if (this.firstTabId === 4 && key === 'name') {
        return '48px'
      }
      if (value === '合计' || value === '客1' || value === '货1' || value === '货2' || value === '货6') {
        return '75px'
      }
      if (value === '客4' || value === '货4') {
        return '60px'
      }
      if (key === 'rank') {
        return '40px'
      } else if (value === '货6同比') {
        return '79px'
      } else if (key === 'name') {
        return '70px'
      } else {
        return '55px'
      }
    }
  }
}
</script>

<style lang="less" scoped>
table {
  width: 100%;
  // padding: 0 0.22rem 0.16rem;

  tr {
    display: flex;
    justify-content: center;
    align-items: center;

    .data-item {
      width: 2.3rem;
      height: 1.48rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      border-right: 1px solid #efefef;

      .data {
        font-size: 0.4rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #0CB4D8;
        /*line-height: 0.56rem;*/
        /*margin-bottom: 0.06rem;*/
        font-family: PingFangSC-Medium, PingFang SC;

        .small {
          font-size: 0.26rem;
          font-family: PingFangSC-Medium, PingFang SC;
        }

        .pern {
          font-family: PingFangSC-Medium, PingFang SC;
        }

        .font {
          font-size: 0.4rem;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #0CB4D8;
          /*line-height: 0.56rem;*/
          /*margin-bottom: 0.06rem;*/
          font-family: PingFangSC-Medium, PingFang SC;
        }
      }

      .item {
        /*display: flex;*/
        /*justify-content: center;*/

        img {
          width: 0.34rem;
          height: 0.34rem;
        }

        .item-title {
          font-size: 0.26rem;
          font-family: "PingFangSC-Medium, PingFang SC";
          // font-weight: 500;
          color: #999999;
          line-height: 0.36rem;
          text-align: center;
          font-weight: normal;
        }

        .item-second-title {
          font-size: 0.26rem;
          font-family: "PingFangSC-Medium, PingFang SC";
          font-weight: normal;
          color: #666;
          line-height: 0.4rem;
          display: flex;
          align-items: center;

          img {
            margin: 0 0.04rem;
            width: 0.16rem;
            height: 0.24rem;
          }

          span {
            font-family: PingFangSC-Medium, PingFang SC;
          }
        }
      }
    }

    .data-item:last-child {
      border-right: 0px;
    }
  }
}

/deep/ .el-table .cell,
.el-table--border td:first-child .cell {
  padding: 0 !important;
}

/deep/ .el-table .cell {
  font-family: PingFangSC-Medium, PingFang SC;
  padding: 0;
}

/deep/ .el-table td,
/deep/ .el-table th {
  padding: 8px 0;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  /*font-weight: 400;*/
  color: #3d3d3d;
}

/deep/ .el-table .cell span {
  font-family: PingFangSC-Regular, PingFang SC;
}

/deep/ .el-table .cell a {
  font-family: PingFangSC-Regular, PingFang SC;
  /*font-size: 14px;*/
}

/*/deep/ .el-table__row {*/
/*  font-weight: 400;*/
/*}*/

/*/ddep/ .el-table__row--striped {*/
/*  background: #F0F5FA;*/
/*}*/

.shaw {
  /deep/ .el-table__row:nth-of-type(1) {
    /*font-size: 0.24rem;*/
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #333333;
  }
}

.custable {
  padding: 0.3rem 0.2rem;
  border-bottom: 0.01rem solid #EFEFEF;

  .second-title {
    font-size: 0.36rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 700;
    color: #3D3D3D;
    line-height: 0.54rem;
  }

  .tab {
    display: flex;
    margin: 0.28rem 0;

    .tab-item {
      margin: 0 0.28rem 0 0;
      width: 1.6rem;
      height: 0.54rem;
      background: #F3F4F5;
      border-radius: 0.08rem;
      font-size: 0.28rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      line-height: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        color: #4375C9;
        background: #EEF4FE;
        border: 0.02rem solid #4375C9;
      }
    }
  }

  .tableBox {
    border-radius: 8px 0 0 0;
    overflow: hidden !important;
    margin: 0.3rem 0 0;

    /*.shaw {*/
    /*  /deep/ .el-table__row:nth-of-type(1) {*/
    /*    !*font-size: 0.24rem;*!*/
    /*    font-family: PingFangSC-Medium, PingFang SC;*/
    /*    font-weight: 700;*/
    /*    color: #333333;*/
    /*  }*/
    /*}*/

    /deep/ .el-table td {
      padding: 8px 0;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      /*font-weight: 400;*/
      color: #3D3D3D;
      /*line-height: 0.34rem;*/
    }

    /deep/ .el-table /deep/ .cell {
      font-family: PingFangSC-Regular, PingFang SC !important;
    }
  }

  /deep/ .el-table th {
    padding: 4px 0;
  }

  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F0F5FA;
  }
}

.link {
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2B5FB7;
  line-height: 0.34rem;
  text-decoration: underline;
}
</style>
